<template>
    <div>
        <r-search :searchHandle="searchHandleAdd" />
        <r-search :searchForm="searchForm" :searchHandle="searchHandle" :searchData="searchData" />
        <r-table :isSelection="false" :isPagination="true" :tableData="tableData" :tableCols="tableCols" :tablePage="tablePage" @refresh="init()"></r-table>
        <r-form :formRules="formRules" :formHandle="formHandle" :formData="formData" :formCols="formCols" ref="elForm" labelWidth="200px" dialogWidth="1000px" :isHandle="true" />
    </div>
</template>
<script>
export default {
    data() {
        return {
            searchData: {
                adName: '',
                type: '',
                devType: '2'
            },
            searchForm: [
                {
                    type: 'input',
                    prop: 'adName',
                    placeholder: '广告名称',
                    width: 150
                },
                {
                    type: 'select',
                    prop: 'type',
                    placeholder: '广告类型',
                    width: 150,
                    options: [
                        {
                            label: '图片',
                            value: 1
                        },
                        {
                            label: '视频',
                            value: 2
                        },
                    ]
                },
            ],
            searchHandleAdd: [
                {
                    label: "新增广告",
                    type: "success",
                    handle: e => this.elFormVisible(),
                    isShow: () => this.apis.showBtn(75, this)
                },
            ],
            searchHandle: [
                {
                    label: '搜索',
                    type: 'success',
                    icon: 'el-icon-search',
                    handle: e => this.init()
                },
                {
                    label: '重置',
                    icon: 'el-icon-refresh-right',
                    handle: e => this.searchFromReset()
                }
            ],
            tableData: [
            ],
            tableCols: [
                {
                    label: 'ID',
                    prop: 'id',
                    // theme: e => e.status ? 'primary' : 'danger', type: "tag",
                },
                {
                    label: '广告名称',
                    prop: 'adName',
                    // theme: e => e.status ? 'primary' : 'danger', type: "tag",
                },
                {
                    label: '广告类型',
                    prop: 'type_des'
                },
                {
                    label: '广告内容',
                    prop: 'url',
                    type: 'image'
                },
                {
                    label: '播放设备数量',
                    prop: 'devCount'
                },
                {
                    label: '上线/下线',
                    type: "switch",
                    prop: 'status',
                    values: [1, 2],
                    change: (row) => this.changeOnline(row)
                },
                {
                    label: '创建时间',
                    prop: 'ctime',
                    formatter: e => this.getDeta(new Date(e.ctime).getTime())
                },
                {
                    label: '操作',
                    type: "button",
                    width: 180,
                    btnList: [
                        {
                            label: '编辑',
                            type: 'primary',
                            handle: (row) => this.elFormDetail(row),
                            isShow: () => this.apis.showBtn(76, this)
                        },
                        {
                            label: '删除',
                            type: 'primary',
                            handle: (row) => this.TableDel('/sys/advert/delete', { id: row.id }),
                            isShow: () => this.apis.showBtn(77, this)
                        },
                    ]
                }

            ],
            tablePage: { limit: 10, page: 1, total: 0 },
            formData: {
                devType: '2',
                adName: "",
                url: "",
                equipmentNos: "",
                status: "",
                type: '1'
            },
            formCols: [
                { type: "input", label: "广告名称", width: 350, prop: "adName", rmblock: true, remark: '广告名称只是作为辨别多个广告条目之用，并不显示在广告中' },
                {                    type: "upload", label: "广告素材", width: 200, prop: "url", remark: '只能上传jpg/png/MP4格式文件', rmblock: true, success: (res, file) => {
                        this.$refs.elForm.loading = false;
                        this.formData.url = res.data.imgPath;
                        this.formData.type = res.data.imgPath.indexOf('.mp4') == -1 ? 1 : 2;
                    }                },
                { type: "select", label: "选择设备", multiple: true, width: 350, prop: "equipmentNos", options: [] },
                { type: "switch", label: "上线/下线", width: 350, prop: "status", values: [1, 2], },
            ],
            formRules: {
                adName: [
                    { required: true, message: '请输入广告名称', trigger: 'blur' },
                ],
                url: [
                    { required: true, message: '广告素材', trigger: 'blur' },
                ],

                equipmentNos: [
                    { required: true, message: '选择设备', trigger: 'blur' },
                ],
                status: [
                    { required: true, message: '在线状态', trigger: 'blur' },
                ],
            },
            formHandle: [
                {
                    label: "取消",
                    handle: e => this.elFormVisible(),
                },
                {
                    label: "确定",
                    type: "success",
                    handle: e => this.elFormSubmit(),
                },

            ],


        };
    },
    components: {},
    computed: {},
    mounted() {
        this.init()
    },
    methods: {
        async init() {
            let parm = { ...this.tablePage, ...this.searchData }
            let res = await this.api.advertlist(parm)
            if (res) {
                this.tablePage.total = res.data.total
                var list = res.data.list || [];
                list.map(res => {
                    res.type_des = res.type == 1 ? '图片' : '视频'
                });
                this.tableData = res.data.list
                this.getDevList()
            }
        },
        async getDevList() {
            this.formCols[2].options = []
            let res2 = await this.api.getAdvertList({ devType: 2 })
            if (res2) {
                for (let i = 0; i < res2.data.length; i++) {
                    this.formCols[2].options.push({
                        value: res2.data[i].equipmentNo,
                        name: res2.data[i].name,
                    })
                }
                this.tableData.map(item => {
                    item.equipmentNos = item.equipmentNos.split(',')

                })
            }
        },
        async changeOnline(row) {
            Object.keys(this.formData).forEach(key => {
                this.formData[key] = row[key]
            })
            this.formData.id = row.id;
            this.formData.equipmentNos = this.formData.equipmentNos.join(',')
            // console.log(this.formData.equipmentNos);
            await this.api.advertupdate(this.formData)
        },
        async elFormSubmit(row) {
            // console.log(row);
            this.formData.equipmentNos = this.formData.equipmentNos.join(',')
            if (row) {
                await this.api.advertupdate(row)
            } else {
                let res = null
                if (this.formData.id) {
                    res = await this.api.advertupdate(this.formData) //advertsave
                } else {
                    res = await this.api.advertsave(this.formData)
                }
                if (res) {
                    this.elFormVisible()
                    this.init()
                }
            }

        },
        elFormDetail(row) {
            Object.keys(this.formData).forEach(key => {
                this.formData[key] = row[key]
            })
            this.formData.id = row.id;
            // if (this.formCols[1].label == '登录密码') {
            //     this.formCols.splice(1, 1)
            // }

            this.elFormVisible()
        },
    }
};
</script>
<style scoped lang='scss'>
.el-icon-search {
  margin-right: 10px;
}
.Tip {
  margin-left: 20px;
}
</style>
